<template>
  <div>
    <el-alert title="未发布商品无法查看商品，因为未发布商品" type="warning"></el-alert>
    <div id="banzi" v-if="!isnogoods">
      <el-descriptions :title="uname">
        <el-descriptions-item label="个人店铺">Ture</el-descriptions-item>
        <el-descriptions-item label="手机号" ><span v-if="uphone">{{ uphone }}</span> <span v-if="!uphone">未设置手机号</span></el-descriptions-item>
        <el-descriptions-item label="商品数量">{{ugoodslenght }}</el-descriptions-item>
        <!-- <el-descriptions-item label="发货备注">
          <el-tag size="small">学校</el-tag>
        </el-descriptions-item>-->
        <!-- <el-descriptions-item label="常驻地区">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item> -->
      </el-descriptions>
    </div>
    <div>
      <el-divider content-position="left"></el-divider>

      <el-empty v-if="isnogoods" description="你没有发布任何商品"></el-empty>
      <div v-if="!isnogoods" class="etb">
        <el-table
          height="450"
          :data="tableData"
          style="width: 100%"
          :row-class-name="tableRowClassName"
        >
          <el-table-column prop="goods_name" label="商品名称" width="180"></el-table-column>
          <el-table-column prop="goods_price" label="商品价格" width="180"></el-table-column>
          <el-table-column prop="goods_number" label="持有数量"></el-table-column>
          <el-table-column prop="goods_state" label="商品状态"></el-table-column>
          <el-table-column prop="goods_stu" label="新旧程度"></el-table-column>

          <el-table-column prop="is_promote" label="讨价还价？">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.is_promote">可以</el-tag>
              <el-tag v-if="!scope.row.is_promote" type="danger">不能</el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="add_time" label="发布时间"></el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="updateGood(scope.row)" type="text" size="small">修改</el-button>
              <el-button type="text" size="small" @click="removeGoods(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 这里是修改商品的弹窗 -->
    <el-dialog title="修改商品" :visible.sync="dialogFormVisible">
      <el-form :model="updateform">
        <el-form-item label="商品名称" :label-width="formLabelWidth">
          <el-input v-model="updateform.goods_name" autocomplete="off"></el-input>
        </el-form-item>
        
       <!-- <el-form-item label="类型" :label-width="formLabelWidth">
          <el-select v-model="updateform.cat_id" placeholder="请选择类型">
            <el-option label="家电" value="家电"></el-option>
            <el-option label="数码" value="数码"></el-option>
            <el-option label="家具" value="家具"></el-option>
            <el-option label="藏品" value="藏品"></el-option>
          </el-select>
        </el-form-item>  -->

        <el-form-item label="新旧程度" :label-width="formLabelWidth">
          <el-select v-model="updateform.goods_stu" placeholder="新旧程度">
            <el-option label="全新" value="100"></el-option>
            <el-option label="99新（几乎全新）" value="99"></el-option>
            <el-option label="89新（略有磨损）" value="89"></el-option>
            <el-option label="79新（多处轻微磨损）" value="79"></el-option>
            <el-option label="59新（磨损磕碰）" value="59"></el-option>
            <el-option label="坏的" value="0"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          :label-width="formLabelWidth"
          label="定价"
          prop="goods_price"
          :rules="[{ required: true, message: '定价不能为空'}]"
        >
          <el-input v-model="updateform.goods_price" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item
          :label-width="formLabelWidth"
          label="拥有数量"
          prop="goods_number"
          :rules="[{ required: true, message: '数量不能为空'}]"
        >
          <el-input v-model.number="updateform.goods_number" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="讨价还价" :label-width="formLabelWidth">
          <el-switch v-model="updateform.is_promote"></el-switch>
        </el-form-item>

        <el-form-item label="商品描述"   :label-width="formLabelWidth">
          <el-input type="textarea" v-model="updateform.goods_introduce"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateGoods">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { isPromise } from "util/types";

export default {
  name: "WorkspaceJsonGoodTgView",
  data() {
    return {
      thegid : 0,
      isnogoods: true,
      params: { params: { query: "user", pagenum: 1, pagesize: 10 } },
      // 改过的后端，如果query是user难么在后端会默认找这个userid的商品
      tableData: [],
      uname: "",
      uphone: "",
      ugoodslenght: "",
      dialogFormVisible: false,
      goodsfrom:{},
      updateform: {},
      formLabelWidth: "80px"
    };
  },

  mounted() {
    this.mygoods();
  },

  methods: {
    async mygoods() {
      let res = await this.$http.get("goods", this.params);
      let goodsarry = res.data.goods;
      this.tableData = goodsarry;
      console.log(goodsarry, goodsarry.length);
      if (goodsarry.length > 0) {
        this.isnogoods = false;
        // let userdata = await this.$http.put("users/" + goodsarry[0].uid);
        // console.log(userdata);
        this.uname = sessionStorage.getItem("userName");
        this.uphone = sessionStorage.getItem("mobile");
        if(sessionStorage.getItem("mobile") != 'null'){
            this.uphone = sessionStorage.getItem("mobile");
        }else{
          this.uphone = false;
        }
        this.ugoodslenght = goodsarry.length;
      }
    },
    // 这里拿用户信息,如果他没有发布过那么什么都不显示，因为他没有注册过
   updateGood(row) {
      // 修改
      this.updateform = row
      this.thegid = row.goods_id
      this.dialogFormVisible = true;
    },
    async  updateGoods(){
      // 修改 被点击直接修改
      console.log(this.thegid)
       let res = await this.$http.put("goods/" + this.thegid,this.updateform);
       if(res.meta.status == 200){
          this.$message.success("修改成功")
          this.dialogFormVisible = false;
       } 
       console.log(goodsdate);
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    removeGoods(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          console.log(row.goods_id);
          let res = await this.$http.delete("goods/" + row.goods_id);
          if (res.meta.status == 200) {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.mygoods();
          } else {
            this.$message({
              type: "error",
              message: "删除失败"
            });
          }
          console.log(res);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });

      console.log(row);
    }
  }
};
</script>

<style lang="less" scoped>
.el-table {
  background: white;
  border-radius: 10px;
}
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
#tablel {
  border-radius: 10px;
}
#banzi {
  padding: 15px;
  border-radius: 10px;
  background: white;
}
.el-alert {
  margin-bottom: 20px;
}
</style>